<template>
    <div class="allbox">
         <nav class="nav">
            <div class="navlogo" @click="tocity">SPACEC</div>
           <input class="search" type="text" name="" id="" placeholder="搜索">
            <div class="user">
                <div v-if="!islogin"><router-link to="login">登录 </router-link>/<router-link to="register"> 注册</router-link></div>
                <div v-if="islogin" style="color: #5A5A5A;">Welcome {{username}}</div>
                <div v-if="islogin"  class="logout" @click="logout">退出登录</div>
            </div>
         </nav>

        <div class="shell">
        <div id="img1" class="img"></div>
        <div class="head">
         Welcome to SPACEC
        </div>
        <div class="text">
           - HERE -
        </div>

        <div id="img2" class="img"></div>
        <div class="head">
            You can feel life
        </div>
        <div class="text">
           - AND -
        </div>

        <div id="img3" class="img"></div>
        <div class="head">
            Enjoy the moment
        </div>
        <div class="text" id="showcase">
            <div class="join">加入我们</div>
            <div class="commit">
                <img src="../../public/img/airplane.png" alt=""><div class="content">欢迎来人工智能计科一组</div>
                <img src="../../public/img/email.png" alt=""><div class="content">联系我们产品经理：莫梓</div>
                <div class="content">QQ：1746159654</div>
            </div>
        </div>
    </div>
    </div>
   
</template>

<script>
import router from '@/router'
    import jwt_decode from "jwt-decode"
    import { useStore } from 'vuex';
import { ref } from '@vue/reactivity';
    export default{
        name:'index',

        setup(){
            let islogin = ref(false)
            let username = ref('')

            function tocity(){
                router.push('/city')
            }

            function islogined(){
                if(window.localStorage.token){
                    console.log(1111)
                    const store = useStore()
                    const user = jwt_decode(localStorage.token)
                    store.commit('userInfo/adduserInfo', user)
                    islogin.value = true
                    username.value = user.username
                }
            }

            function logout()
            {
                window.localStorage.token = ''
                islogin.value = false
                // router.replace('/login')
            }

            islogined()

            return{
                islogin,
                username,
                tocity,
                logout,
            }
        }
    }
</script>

<style scoped>
    input{
        outline: medium;
        border: none;
    }

    a{
        text-decoration: none;
        color: #5A5A5A;
    }

    

    .nav{
        position: fixed;
        position: absolute;
        top:0;
        height: 60px;
        width: 100%;
        background-color: #fff;
        box-shadow: 5px 5px 10px #b9b9b95b;
        z-index: 99;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 300px;
        justify-content: space-between;
    }

    .navlogo{
        font-weight: bolder;
        font-size: 1.2em;

    }

    .search{
        background-color: #F2F2F2;
        height: 60%;
        width: 20%;
        border-radius: 5px;
        padding: 0 20px;
        position: relative;
        left: -300px;
    }


    .search::placeholder{
        font-size: 1.1em;
    }
    
    .shell{
        height: 100vh;
        overflow-x: hidden;
        perspective: 3px;     
      
 
    }
    .shell div{
        position: relative;
    }
    .img{
        display: flex;
        justify-content: center;
        align-items: center;
        transform:  translateZ(-1px) scale(1.4);
        background-size: cover;
        background-repeat: no-repeat;
        height: 100vh;
        z-index: -2;
    }
    #img1{
        background-image: url("../../public/img/2.jpg");
        
    }
    #img2{
        background-image: url("../../public/img/1.jpg");
    }
    #img3{
        background-image: url("../../public/img/3.jpg");
    }

    .head{
        text-align: center;
        color: #fff;
        font-size: 5em;
        transform: translateY(-50vh) translateZ(1px);
    }

    .text{
        height: 50vh;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 5em;
    }

    #showcase{
        height: 35vh;
        font-size: 1.3em;
    }

    .join{
        flex: 2;
        text-align: center;
        font-size: 1.8em;
    }
    .commit{
        flex: 3;
        text-align: center;
        font-size: 1em;
    }

    .user{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logout{
        padding: 0 30px;
        color: #5A5A5A;
    }

    .logout:hover{
        color: black;
        font-weight: bold;
    }
</style>